<template>
  <h3 class="title">写文章</h3>
  <div class="container">

    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="50px"
        class="register-form"
    >

      <div style="margin-bottom: 10px;width: 300px">
        <el-form-item label="标题" prop="articleTitle">
          <el-input v-model="ruleForm.articleTitle"
                    type="articleTitle"
                    autocomplete="off"
          >

          </el-input>
        </el-form-item>
      </div>

      <div style="margin-bottom: 10px;width: 300px">
        <el-form-item label="文章种类" prop="categoryId">

          <el-select
              v-model="ruleForm.categoryId"
              class="m-2"
              placeholder="Select"
              size="large">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>


      <el-form-item label="图片地址" prop="articleCover">
        <el-input
            v-model="ruleForm.articleCover"
            type="text"
            autocomplete="off"
        >
        </el-input>
        <div class="demo-image__preview">
          <el-image
              style="width: 100px; height: 100px"
              @click="srcList.push(ruleForm.articleCover)"
              :src="ruleForm.articleCover"
              :preview-src-list="srcList"
              :initial-index="1"
              fit="cover"
          />
        </div>
      </el-form-item>
      <div style="width: 100%">
        <el-form-item label="文章内容" prop="articleContent">

          <el-input
              style="width: 1000px"
              v-model="ruleForm.articleContent"
              :autosize="{ minRows: 10, maxRows: 20 }"
              type="textarea"
              placeholder="Please input"
          />
        </el-form-item>



        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
          >提交
          </el-button
          >

          <el-button @click="resetForm(ruleFormRef)">重写</el-button>
        </el-form-item>
      </div>
    </el-form>

  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {FormInstance} from 'element-plus'
import {inject} from "vue-demi";
const request = require("@/utils/request.js")
const router: any = require("@/router/index.js")


const reload: any = inject("reload")
const ruleFormRef = ref<FormInstance>()
const value = ref('')

const srcList = [

  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F5476b5dff07a1.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668775105&t=273c3650028086a2ab527b8df96a87ed"
]

const options = [
  {
    value: '1',
    label: 'Java相关',
  },
  {
    value: '2',
    label: 'Spring',
  },
  {
    value: '3',
    label: '日常分享',
  },
  {
    value: '187',
    label: '测试分类',
  },

]

const validatePass3 = async (rule: any, value: any, callback: any) => {

  if (value === '') {
    callback(new Error('请输入文章内容'))
  } else {
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入标题'))
  } else {
    callback()
  }
}
const validatePass4 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请选择文章种类'))
  } else {

    callback()
  }
}
const validatePass5 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('提供你的图片地址'))
  } else {

    callback()
  }
}


const ruleForm = reactive({
  articleTitle: '',
  categoryId: 1,
  articleCover: '',
  articleContent: '',
  userId: 0
})

const rules = reactive({
  articleTitle: [{validator: validatePass2, trigger: 'blur'}],
  articleContent: [{validator: validatePass3, trigger: 'blur'}],
  categoryId: [{validator: validatePass4, trigger: 'blur'}],
  articleCover: [{validator: validatePass5, trigger: 'blur'}],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      let result = await request.get("user/getuser")
      if (result.data.code === 401) {
        alert("请先登录")
        return
      }
      let data1 = result.data
      ruleForm.userId = data1.data.id;
      console.log(ruleForm.userId)
      let result1 = await request.post("createarticle", ruleForm)
      console.log(ruleForm)
      let data = result1.data
      if (data.code == 200) {
        console.log(data.code + " " + data.msg)
        console.log(ruleForm)
        alert("提交成功！")
        await router.default.push({name:'home'})
      } else {
        alert("提交失败！")
        return false
      }


    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style lang="scss">
a {
  color: white
}

.container {
  align-items: revert;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
}

.title {
  font-weight: bolder;
  margin: 20px auto 30px auto;
  text-align: center;
  color: #707070;
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
}

.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.register-code {
  width: 33%;
  height: 40px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}


.register-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>
